<template>
  <div class="default-home-page flex-1-1">
    <div class="search-container">
      <v-text-field
        v-model="searchQuery"
        :append-inner-icon="mdiMagnify"
        class="search-field"
        density="comfortable"
        hide-details
        :placeholder="t('default-home.search-placeholder')"
        variant="solo-filled"
        @click:append-inner="handleSearch"
        @keyup.enter="handleSearch"
      >
      </v-text-field>
    </div>

    <div class="quick-access">
      <h2 class="text-h6 mb-4">{{ t('default-home.quick-access') }}</h2>
      <div class="quick-access-grid">
        <v-card
          v-for="(site, index) in quickAccessSites"
          :key="index"
          class="quick-access-card"
          variant="tonal"
          @click="navigateTo(site.url)"
        >
          <v-card-item>
            <v-avatar class="mb-2" :color="site.color">
              <v-icon :icon="site.icon" />
            </v-avatar>
            <v-card-title class="text-body-1">{{ site.name }}</v-card-title>
          </v-card-item>
        </v-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  mdiEmail,
  mdiGithub,
  mdiGoogle,
  mdiMagnify,
  mdiMap,
  mdiTranslate,
  mdiYoutube
} from '@mdi/js'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const searchQuery = ref('')

const quickAccessSites = [
  { name: 'Google', icon: mdiGoogle, url: 'https://www.google.com', color: 'blue' },
  { name: 'YouTube', icon: mdiYoutube, url: 'https://www.youtube.com', color: 'red' },
  { name: 'GitHub', icon: mdiGithub, url: 'https://github.com', color: 'grey-darken-3' },
  { name: 'Gmail', icon: mdiEmail, url: 'https://mail.google.com', color: 'red-darken-2' },
  { name: 'Maps', icon: mdiMap, url: 'https://maps.google.com', color: 'green' },
  {
    name: 'Translate',
    icon: mdiTranslate,
    url: 'https://translate.google.com',
    color: 'blue-darken-2'
  }
]

function handleSearch() {
  if (searchQuery.value.trim()) {
    window.location.href = `https://www.google.com/search?q=${encodeURIComponent(searchQuery.value)}`
  }
}

function navigateTo(url: string) {
  window.location.href = url
}
</script>

<style scoped>
.default-home-page {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.search-container {
  margin: 4rem auto;
  max-width: 600px;
}

.search-field {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
}

.quick-access {
  margin-top: 3rem;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.quick-access-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.quick-access-card:hover {
  transform: translateY(-2px);
}
</style>

<i18n>
{
  "zhHans": {
    "default-home": {
      "search-placeholder": "搜索网页",
      "quick-access": "快速访问"
    }
  },
  "en": {
    "default-home": {
      "search-placeholder": "Search the web",
      "quick-access": "Quick Access"
    }
  }
}
</i18n>
